<template>
  <div>
    <h4>Test组件</h4>
    <h4>{{books.length}} 本书</h4>
  </div>
</template>

<script>
export default {
  props:{
    info:{
      default:"",
      type:String
    }
  },
  data(){
    return{
      msg:"hello!",
      // 
      books:[]
    }
  },
  methods:{
    show(){
      console.log("调用Test 组件的show方法");
    },
    // 获取书籍数据
    getBooks(){
      const xhr = new XMLHttpRequest()
      xhr.addEventListener('load',()=>{
        const res =  JSON.parse(xhr.responseText)
        console.log(res);
        this.books = res.data
      })
      xhr.open('get','http://www.liulongbin.top:3006/api/getbooks')
      xhr.send()
    }
  },
  // 组件的props data methods等属性都未被创建 ，处于不可用的状态
  beforeCreate(){
    // console.log(this.info);
    // console.log(this.msg);
    // this.show()
  },
  // 组件的props data methods已经创建好了，可以使用，但是组件的模板结构尚未生成。
  created(){
    // 可以在created函数中 发起Ajax请求获得数据
    // console.log(this.info);
    // console.log(this.msg);
    // this.show();

    this.getBooks();
  }
}
</script>

<style>

</style>